<template>
  <el-card class="new-poetry-card" shadow="hover" style="max-width: 1200px; margin: 50px auto; background: #f8f9fa; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);">
    <template #header>
      <div class="card-header" style="display: flex; justify-content: center; font-size: 24px; color: #2c3e50;">
        <span>现代诗欣赏</span>
      </div>
    </template>
    <el-row :gutter="20">
      <el-col :span="8">
        <el-form :model="poetryForm" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="poetryForm.title"></el-input>
          </el-form-item>
          <el-form-item label="作者">
            <el-input v-model="poetryForm.author"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitPoetry">提交</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="16">
        <el-tabs v-model="activeTab">
          <el-tab-pane v-for="(poetry, index) in poetryList" :key="index" :label="poetry.title" :name="index.toString()">
            <h2>{{ poetry.title }}</h2>
            <p>作者: {{ poetry.author }}</p>
            <pre>{{ poetry.content }}</pre>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const poetryForm = ref({ title: '', author: '', content: '' })
const activeTab = ref('0')

const poetryList = ref([
  { title: '再别康桥', author: '徐志摩', content: '轻轻的我走了，正如我轻轻的来；我轻轻的招手，作别西天的云彩。' },
  { title: '雨巷', author: '戴望舒', content: '撑着油纸伞，独自彷徨在悠长，悠长又寂寥的雨巷，我希望逢着一个丁香一样地结着愁怨的姑娘。' },
  { title: '断章', author: '卞之琳', content: '你站在桥上看风景，看风景的人在楼上看你。明月装饰了你的窗子，你装饰了别人的梦。' }
])

const submitPoetry = () => {
  if (poetryForm.value.title && poetryForm.value.author) {
    poetryList.value.push({ ...poetryForm.value })
    activeTab.value = poetryList.value.length - 1
    ElMessage.success('提交成功')
    poetryForm.value = { title: '', author: '', content: '' }
  } else {
    ElMessage.error('请填写标题和作者')
  }
}
</script>

<style scoped>
.new-poetry-card {
  padding: 20px;
}
.card-header {
  margin-bottom: 20px;
}
.el-tabs__content {
  padding: 20px;
  background: white;
  border-radius: 4px;
}
</style>